<template>
  <div class="side-menu-wrapper">
    <slot name="title"></slot>
    <Menu v-show="!isCollapsed" width="auto" theme="dark" @on-select="handleSelect">
      <template v-for="(item, index) in this.list">
        <re-submenu
          v-if="item.children"
          :key="`menu_${index}`"
          :name="item.name"
          :parent="item"
        >
        </re-submenu>
        <MenuItem  v-else :key="`menu_${index}`" :name="item.name">
          <Icon :type="item.icon" />
          {{ item.meta.title }}
        </MenuItem >
      </template>
    </Menu>
    <div v-show="isCollapsed" class="drop-wrapper">
      <template v-for="item in list">
        <re-dropdown
          @on-select="handleSelect"
          v-if="item.children"
          :key="`drop_${item.name}`"
          :parent="item"
          :show-title="false"
          icon-color="#fff"
        ></re-dropdown>
        <Tooltip
          v-else
          transfer
          :content="item.meta.title"
          placement="right"
          :key="`drop_${item.name}`"
        >
          <span @click="handleClick(item.name)" class="drop-menu-span">
            <Icon :type="item.icon" color="#fff" :size="20"></Icon>
          </span>
        </Tooltip>
      </template>
    </div>
  </div>
</template>

<script>
import ReSubmenu from './re-submenu'
import ReDropdown from './re-dropdown'

export default {
  name: 'SideMenu',
  props: {
    isCollapsed: {
      type: Boolean,
      default: true
    },
    list: {
      type: Array,
      default: () => {
        return [{
            title: '1111',
            name: '111',
            icon: 'ios-alarm'
          },
          {
            title: '1111-1',
            name: '111_1',
            icon: 'ios-alarm',
            children: [{
                title: '1111-1',
                name: '1111_1',
                icon: 'ios-alarm',
                children: [{
                  title: '1111-1',
                  name: '1111_11',
                  icon: 'ios-alarm'
                },
                {
                  title: '1111-1',
                  name: '1111_1122',
                  icon: 'ios-alarm'
                }]
            },
            {
              title: '1111-1',
              name: '111_3',
              icon: 'ios-alarm'
            }]
          },
          {
            title: '1111-1',
            name: '111_2',
            icon: 'ios-alarm',
          }
        ]
      }
    }
  },
  components: {
    ReSubmenu,
    ReDropdown
  },
  methods: {
    handleClick (name) {
      console.log(name)
    },
    handleSelect (name) {
      console.log(name)
    }
  }
}
</script>

<style lang="stylus">
.side-menu-wrapper
  width 100%
  .ivu-tooltip, .drop-menu-span
    display block
    padding 10px 0
    width 100%
    text-align center
  .drop-wrapper > .ivu-dropdown
    display block
</style>
